<template>
	<view>
		<!-- 头部固定区域 -->
		<view class="topPlay" :style="{height: navHeight + topHeight + 'px'}">
			<view class="top" :style="{height: topHeight + 'px'}"></view>
			<view class="mid" :style="{height: navHeight + 'px'}">
				<view class="leftTop">
					<image class="backIcoB" @click="back()" src="@/static/images/other/back.png"></image>
					<view class="studyNum">15</view>
					<view class="lastWord">course n.课程;球场</view>
				</view>
			</view>
		</view>
		
		<!-- 中间单词展现区域 -->
		<view class="midWord">
			<view class="word">techni·___</view>
			<view class="chinese">n.技巧，技能；技术，方法</view>
		</view>
		
		<!-- 选项展示区域 -->
		<view class="optionOut">
			<view class="options">
				<view class="optionItem" v-for="item in options">
					<view class="option">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import popup from "@/components/popup.vue";
	export default {
		components:{popup},
		data() {
			return {
				topHeight:0,
				navHeight:0,
				options:[
					{
						name:"kn"
					},
					{
						name:"que"
					},
					{
						name:"ng"
					},
					{
						name:"nk"
					},
					{
						name:"ck"
					},
				],
				themeColor:"",
				themeColorLess:"",
			};
		},
		onLoad() {
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			this.topHeight = getApp().globalData.statusBarHeight;
			this.navHeight = getApp().globalData.navigationBarHeight;
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.src = 'https://ali.bczcdn.com/r/06b0da5823c0df10a3c54afd127c427b_17364_1550470733.mp3';
		},
		methods:{
			back(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-color;
	}
	// 头部固定区域
	.topPlay{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		
		.top{
			width: 100%;
			background-color: $bg-color;
		}
		
		.mid{
			background-color: $bg-color;
			margin: 0 $both-sides;
			
			.leftTop{
				display: flex;
				height: 100%;
				align-items: center;
				color: #8d929a;
				font-size: 22rpx;
				
				.backIcoB{
					height: 40rpx;
					width: 40rpx;
				}
				
				.studyNum{
					padding-left: 20rpx;
				}
				
				.lastWord{
					padding-left: 40rpx;
				}
			}
		}
	}
	
	//中间单词展现区域
	.midWord{
		margin-top: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.word{
			font-size: 50rpx;
			color: #283044;
			font-weight: 700;
		}
		.chinese{
			font-size: 30rpx;
			color: #8d929a;
			margin-top: 30rpx;
			font-weight: 600;
		}
	}
	
	//选项展示区域
	.optionOut{
		display: flex;
		justify-content: center;
		margin-top: 60%;
		.options{
			width: 560rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			
			.optionItem{
				width: 170rpx;
				height: 120rpx;
				box-shadow: 0rpx 0rpx 20rpx #cfcfcf;
				margin-top: 30rpx;
				background-color: white;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #283044;
			}
		}
	}
	
	
</style>
